import React, { useCallback, useMemo, useState } from "react";
import Icon from "@ant-design/icons";
import { Flex, Button, Tooltip } from "antd";
import { COMMAND_NAMES, commandService } from "@/services";
import type { CmdOptions } from "@/services/types";

// @ts-expect-error svg
import Scroll from "./svgs/scroll";
// @ts-expect-error svg
import Roi from "./svgs/roi";
// @ts-expect-error svg
import Pan from "./svgs/pan";
// @ts-expect-error svg
import Zoom from "./svgs/zoom";
// @ts-expect-error svg
import Crosshair from "./svgs/crosshairs";
// @ts-expect-error svg
import Maxip from "./svgs/maxip";
// @ts-expect-error svg
import Avgip from "./svgs/avgip";
// @ts-expect-error svg
import Minip from "./svgs/minip";
// @ts-expect-error svg
import Reset from "./svgs/reset";
// @ts-expect-error svg
import Length from "./svgs/length";

const Toolbar: React.FC = () => {
  const [curToolBtn, setCurToolBtn] = useState(COMMAND_NAMES.SCROLL as string);
  const [curModeBtn, setCurModeBtn] = useState("");

  const [tools, modes]: [string[], string[]] = useMemo(() => {
    return [
      [
        COMMAND_NAMES.CROSSHAIR,
        COMMAND_NAMES.SCROLL,
        COMMAND_NAMES.WINDOW,
        COMMAND_NAMES.PAN,
        COMMAND_NAMES.ZOOM,
        COMMAND_NAMES.LENGTH,
      ],
      [COMMAND_NAMES.MAXIP, COMMAND_NAMES.AVGIP, COMMAND_NAMES.MINIP],
    ];
  }, []);

  const handleClick = useCallback((options: CmdOptions) => {
    if (tools.includes(options.name)) setCurToolBtn(options.name);
    else if (modes.includes(options.name)) setCurModeBtn(options.name);
    commandService.runCommand(options);
  }, []);

  const getClassNames = useCallback(
    (name: string) => {
      return (
        (name == curToolBtn || name == curModeBtn
          ? "!bg-green-800"
          : "!bg-transparent") + " !text-blue-50 !border-none !outline-none"
      );
    },
    [curToolBtn, curModeBtn]
  );

  return (
    <Flex wrap gap="small">
      <Tooltip title="滚动">
        <Button
          className={getClassNames(COMMAND_NAMES.SCROLL)}
          onClick={() => handleClick({ name: COMMAND_NAMES.SCROLL })}
          icon={<Icon component={Scroll} />}
        />
      </Tooltip>
      <Tooltip title="调窗">
        <Button
          className={getClassNames(COMMAND_NAMES.WINDOW)}
          onClick={() => handleClick({ name: COMMAND_NAMES.WINDOW })}
          icon={<Icon component={Roi} />}
        />
      </Tooltip>
      <Tooltip title="平移">
        <Button
          className={getClassNames(COMMAND_NAMES.PAN)}
          onClick={() => handleClick({ name: COMMAND_NAMES.PAN })}
          icon={<Icon component={Pan} />}
        />
      </Tooltip>
      <Tooltip title="缩放">
        <Button
          className={getClassNames(COMMAND_NAMES.ZOOM)}
          onClick={() => handleClick({ name: COMMAND_NAMES.ZOOM })}
          icon={<Icon component={Zoom} />}
        />
      </Tooltip>
      <Tooltip title="十字线">
        <Button
          className={getClassNames(COMMAND_NAMES.CROSSHAIR)}
          onClick={() => handleClick({ name: COMMAND_NAMES.CROSSHAIR })}
          icon={<Icon component={Crosshair} />}
        />
      </Tooltip>
      <Tooltip title="测量">
        <Button
          className={getClassNames(COMMAND_NAMES.LENGTH)}
          onClick={() => handleClick({ name: COMMAND_NAMES.LENGTH })}
          icon={<Icon component={Length} />}
        />
      </Tooltip>
      <Tooltip title="Max IP">
        <Button
          className={getClassNames(COMMAND_NAMES.MAXIP)}
          onClick={() => handleClick({ name: COMMAND_NAMES.MAXIP })}
          icon={<Icon component={Maxip} />}
        />
      </Tooltip>
      <Tooltip title="Avg IP">
        <Button
          className={getClassNames(COMMAND_NAMES.AVGIP)}
          onClick={() => handleClick({ name: COMMAND_NAMES.AVGIP })}
          icon={<Icon component={Avgip} />}
        />
      </Tooltip>
      <Tooltip title="Min IP">
        <Button
          className={getClassNames(COMMAND_NAMES.MINIP)}
          onClick={() => handleClick({ name: COMMAND_NAMES.MINIP })}
          icon={<Icon component={Minip} />}
        />
      </Tooltip>
      <Tooltip title="重置">
        <Button
          className={getClassNames(COMMAND_NAMES.RESET)}
          onClick={() => handleClick({ name: COMMAND_NAMES.RESET })}
          icon={<Icon component={Reset} />}
        />
      </Tooltip>
    </Flex>
  );
};

export default Toolbar;
